<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
</head>

<body>
<h1>司机监听测试页面-模拟司机客户端</h1>
<button onclick="setMessageContent('鼠标点我了')">测试message展示</button>
<div id="message">展示服务推送过来消息的地方</br></div></br>
<button onclick="sourceClose()">关闭连接</button>


<script>
    userId = 12;
    source = null;
    let httpRequest = null;

    if (window.EventSource){
        console.info("此浏览器支持SSE");
        //连接的建立
        source = new EventSource("http://localhost:9001/connect/" + userId);
        source.addEventListener("message",function (e){
            content = e.data;
            console.info("消息内容：" + content);
            setMessageContent(content);
        })
    }else {
        console.info("此浏览器不支持")
    }

    function setMessageContent(content){
        document.getElementById("message").innerHTML += (content + '</br>');
    }

    function sourceClose(){
        console.info("连接关闭");
        //客户端关闭
        source.close();
        //服务端中map的SseEmitter移除
        httpRequest = new XMLHttpRequest();
        httpRequest.open("get","http://localhost:9001/close/" + userId);
        httpRequest.send();
    }
</script>
</body>
</html>